.video-wrapper {
	background-color: black;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.device {
	background-size: contain;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.ipad {
	@extend .device;
	background-image: url(/wiki/assets/img/ipad.svg);
	padding: 3.5% 10%;
}

.nexus-7 {
	@extend .device;
	background-image: url(/wiki/assets/img/nexus-7.svg);
	padding: 6% 11%;
}

.has-screenshot {
	max-width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 1px 0 #ccc, 0 1px 0 1px #eee;
	border-radius: 2px;
	margin-left: auto;
	margin-right: auto;
	background: #e0e2e6 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="12" viewBox="0 0 44 12"><circle cx="6" cy="6" r="4" fill="#FC625D"/><circle cx="22" cy="6" r="4" fill="#FDBC40"/><circle cx="38" cy="6" r="4" fill="#35CC4B"/></svg>') 4px 4px no-repeat;
	padding: 20px 0 62.5% 0;
	position: relative;

	img {
		position: absolute;
		top: 20px;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 0 0 2px 2px;
	}
}

.screenshot {
	@extend .has-screenshot;
	margin: 0 auto;
	padding: 20px 0 0 0;
}